<template>
  <div class="Tab">
    <button @click="show = '军事'">军事</button>
    <button @click="show = '新闻'">新闻</button>
    <button @click="show = '娱乐'">娱乐</button>
    <ul v-show="show == '军事'">
      <li>军事</li>
      <li>军事</li>
      <li>军事</li>
      <li>军事</li>
      <li>军事</li>
      <li>军事</li>
    </ul>
    <ul v-show="show == '新闻'">
      <li>新闻</li>
      <li>新闻</li>
      <li>新闻</li>
      <li>新闻</li>
      <li>新闻</li>
      <li>新闻</li>
    </ul>
    <ul v-show="show == '娱乐'">
      <li>娱乐</li>
      <li>娱乐</li>
      <li>娱乐</li>
      <li>娱乐</li>
      <li>娱乐</li>
      <li>娱乐</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Tab",
  data() {
    return {
      show: "军事",
    };
  },
};
</script>
<style scoped lang="less">
@w:50px;
@h:50px;
.Tab {
  width: 600px;
  height: 400px;
  /* 线性渐变 */
  background-image: linear-gradient(to right, black, white, white, black);
  margin: 20px auto;
  button {
    width: @w;
    height: @h;
    border-radius: 50%;
    background: skyblue;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    margin-right: 20px;
  }
}
ul {
  list-style: none;
  color: white;
  font-size: 20px;
}
/* 选项卡中按钮的样式 */
</style>